<template>
	<view class="container">
		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px',backgroundColor:info.app.color}]"
			style="height: 100rpx;margin-left: -1px;width: 101%;margin-top: -1px;box-shadow: none;">
			<view class="" @click="goToCity"
				style="font-size: 22rpx;color: #fff;width: 140rpx;text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 0 10rpx;">
				<view class=""
					style="display: flex;align-items: center;justify-content: center;padding: 7rpx 10rpx;border-radius: 30rpx;"
					:style="[{backgroundColor:info.app.color}]">
					<view class="">{{name}}</view>
					<text class="tn-icon-down-triangle"></text>
				</view>
			</view>
			<view class="search-form round" style="width: 80%;margin-right: 12rpx;" @click="focus">
				<text class="cuIcon-search" style="font-size: 38rpx;"></text>
				<view class="">输入搜索的关键词</view>
			</view>
			<view class="cu-list grid col-2" style="width: 20%;background: transparent !important;">
				<!-- <view class="cu-item" style="padding: 0;">
					<text class="lg cuIcon-scan" style="color: #ffffff;font-size: 40rpx;"></text>
					<text style="color: #ffffff;margin-top: 0rpx;font-size: 18rpx;">扫一扫</text>
				</view> -->
				<view class="cu-item" style="padding: 0;" @click="message">
					<text class="lg cuIcon-message" style="color: #ffffff;font-size: 40rpx;"></text>
					<text style="color: #ffffff;margin-top: 0rpx;font-size: 18rpx;">消息</text>
				</view>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="" style="margin-top: 95rpx;"></view>
		<!-- #endif -->
		<view class="unicorn-header1" :style="[{backgroundColor:info.app.color}] ">
			<view class="categoryNavbar-container rowCenBet"
				style="display: flex;justify-content: space-between;align-items: center;overflow: hidden;">
				<view class="" style="flex: 1;overflow: hidden;">
					<tn-tabs :list="menu" :isScroll="true" :current="current" name="name" @change="change"
						activeColor="#000" inactiveColor="#1d1d1d" :showBar="false" :activeItemStyle="activeItemStyle"
						:inactiveItemStyle="inactiveItemStyle"></tn-tabs>
				</view>
				<view class="rowCenCen" @click="showCateModel()"
					style="width: 100rpx;display: flex;justify-content: center;margin-bottom: 10rpx;padding-left: 20rpx;">
					<text class="tn-icon-align tn-color-white"></text>
					<text style="font-size: 22rpx;color: #fff;">分类</text>
				</view>
			</view>
		</view>

		<view class="" v-if="current!=0 && current!=1">
			<view :style="[{backgroundColor:info.app.color}]" class="tui-product-box"
				v-if="currentData && currentData.children && currentData.children.length>0">
				<view class="" style="padding: 20rpx 0;">
					<view class="" style="background: #fff;padding: 20rpx 5rpx;border-radius: 30rpx;">
						<tn-grid align="left" :col="col">
							<block v-for="(item, index) in currentData.children" :key="index">
								<!-- H5 -->
								<!-- #ifndef MP-WEIXIN -->
								<tn-grid-item style="background: none;" @click="currentItem(item,index)"
									v-if="index<=indexLength">
									<image :src="url + item.image" mode="aspectFit" style="width: 80rpx;height: 80rpx;"
										v-if="item.image"></image>
									<image src="../../static/icon-item-001.png" mode="aspectFit"
										style="width: 80rpx;height: 80rpx;" v-else></image>
									<view style="padding: 10rpx;font-size: 24rpx;text-align: center;width: 250rpx;">
										{{ item.name }}
									</view>
								</tn-grid-item>

								<!-- #endif-->
								<!-- 微信小程序 -->
								<!-- #ifdef MP-WEIXIN -->
								<tn-grid-item style="background: none;" @click="currentItem(item,index)"
									:style="{width: gridItemWidth}" v-if="index<=indexLength">
									<image :src="url + item.image" mode="aspectFit" style="width: 80rpx;height: 80rpx;"
										v-if="item.image"></image>
									<image src="../../static/icon-item-001.png" mode="aspectFit"
										style="width: 80rpx;height: 80rpx;" v-else></image>
									<view style="padding: 10rpx;font-size: 24rpx;text-align: center;width: 250rpx;">
										{{ item.name }}
									</view>
								</tn-grid-item>
								<!-- #endif-->
							</block>

							<tn-grid-item style="background: none;" @click="allCurrentData()"
								:style="{width: gridItemWidth}">
								<image src="../../static/ddduo.png" mode="aspectFit"
									style="width: 80rpx;height: 80rpx;">
								</image>
								<view
									style="padding: 10rpx;font-size: 24rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 150rpx;text-align: center;">
									{{indexLength>8?'收起':'查看更多'}}
								</view>
							</tn-grid-item>

						</tn-grid>
						<!-- <view class="" style="font-size: 26rpx;text-align: right;padding: 10rpx 20rpx;" @click="allCurrentData">查看更多</view> -->
					</view>
				</view>

			</view>
			<view class="tui-product-list">
				<view class="tui-product-container">
					<block v-for="(item, index) in allChildren" :key="index" v-if="(index + 1) % 2 != 0">
						<!--商品列表-->
						<view class="tui-pro-item" hover-class="tui-hover" :hover-start-time="150"
							@click="detailCurrent(item)">
							<image :src="info.app.cdnurl +  item.image" class="tui-pro-img" mode="widthFix" lazy-load />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.title }}</view>
								<view class="tui-pro-tit2">{{ item.subtitle }}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price" v-if="item.price">￥{{ item.price[0] }}</text>
										<text class="tui-factory-price">￥{{ item.original_price }}</text>
									</view>
									<!-- <view class="tui-pro-pay">{{ item.sales }}人付款</view> -->
								</view>
							</view>
						</view>
						<!--商品列表-->
					</block>
				</view>
				<view class="tui-product-container">
					<block v-for="(item, index) in allChildren" :key="index" v-if="(index + 1) % 2 == 0">
						<view class="tui-pro-item" hover-class="tui-hover" :hover-start-time="150"
							@click="detailCurrent(item)">
							<image :src="info.app.cdnurl + item.image" class="tui-pro-img" mode="widthFix" lazy-load />
							<view class="tui-pro-content">
								<view class="tui-pro-tit">{{ item.title }}</view>
								<view class="tui-pro-tit2">{{ item.subtitle }}</view>
								<view>
									<view class="tui-pro-price">
										<text class="tui-sale-price" v-if="item.price">￥{{ item.price[0] }}</text>
										<text class="tui-factory-price">￥{{ item.original_price }}</text>
									</view>
									<!-- <view class="tui-pro-pay">{{ item.sales }}人付款</view> -->
								</view>
							</view>
						</view>
					</block>
				</view>
			</view>



		</view>
		<view class="tui-product-box" v-if="current==0">
			<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="false" v-if="TabCur==0"
				:autoplay="true" interval="5000" duration="500" style="min-height: 100px;">
				<swiper-item v-for="(item,index) in swiperList" :key="index" @click="nagateGo(item)">
					<image :src="url+item.src" mode="widthFix" v-if="item.type=='image'"></image>
					<video :src="url+item.src" autoplay loop muted :show-play-btn="false" :controls="false"
						objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
			<!-- :class="cur==1?'activeHei':'Hei'" -->
			<view class="" style="width: 100%;">
				<view class="unicorn-header2" style="margin-top: -1px;">
					<swiper class="screen-swiper square-dot" :indicator-dots="true" :circular="false" :autoplay="false"
						indicator-color="#000" indicator-active-color="#fd7164" interval="5000" duration="500"
						style="background: transparent !important;height: 360rpx;" @change="swiperChange">
						 <!-- :style="{ height: swiperHeight + 'rpx', transition: 'height 0.5s ease' }" -->
						<swiper-item v-for="(item,index) in menuList" :key="index" class="" dotsSelect
							style="background: transparent !important;">
							<view class="cu-list grid col-5 no-border"
								style="background: transparent !important;padding: 20rpx 0;">
								<view class="cu-item" v-for="(itemsub,indexsub) in item" :key="indexsub"
									@click="goToMenu(index,itemsub,indexsub)"
									style="display: flex;align-items: center;justify-content: center;background: transparent !important;padding: 12rpx 0;">
									<image mode="widthFix" :src="url+itemsub.src" lazy-load
										style="width: 80rpx;margin-bottom: 10rpx;background: transparent !important;">
									</image>
									<text style="color: #333;"
										v-if="itemsub.title && itemsub.title.text">{{itemsub.title.text}}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class=""
				style="width: 100%;padding:0 20rpx 0rpx 20rpx;background: #fff;display: flex;justify-content: center;"
				v-if="imageBlock.src">
				<!-- <image :src="url+imageBlock.src" mode="widthFix" style="width: 100%;height: 200rpx;"></image> -->
				<!-- <img :src="url+imageBlock.src" style="width: 100%;height: 200rpx;" @click="show=true"/> -->
				<img :src="url+imageBlock.src" style="width: 100%;height: 200rpx;" @click="createsShareImage" />


			</view>


			<view class="tui-block__box">
				<view class="tui-group-name">
					<view>
						<text>精品推荐</text>
						<!-- <text class="tui-sub__desc">大家都在买</text> -->
					</view>
					<view class="tui-more__box" @click="ptPage">
						<text>更多</text>
						<!-- <tui-icon name="arrowright" :size="36" unit="rpx" color="#999"></tui-icon> -->
						<text class="tn-icon-right"></text>
					</view>
				</view>
				<scroll-view scroll-x>
					<view class="tui-goods__list">
						<view class="tui-goods__item" @tap="detailCurrent(item)" v-for="(item, index) in tjbd"
							:key="index">
							<view class="tui-goods__imgbox">
								<image :src="url+item.image" mode="widthFix" class="tui-goods__img"
									style="border-radius: 10rpx;" lazy-load></image>
							</view>
							<view class="tui-pri__box">
								<view class="tui-sale-pri">
									<view class="tui-size-sm">¥</view>
									<view>{{item.price[0]}}</view>
									<!-- <view class="tui-size-sm">.50</view> -->
								</view>
							</view>
							<!-- <view class="tui-original__pri">¥{{item.original_price}}</view> -->
						</view>
					</view>
				</scroll-view>
			</view>
			<view class=""
				style="display: flex;flex-direction: column;justify-content: space-between;padding: 10rpx 0 0 0;">
				<view class="" style="width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;">
					<view class=""
						style="background: #fff;border-radius: 10rpx;padding: 10rpx;width: 49%;margin-top: 10rpx;"
						@click="goToSeckIll" v-if="seckillList && seckillList.length>0">
						<view class="tui-seckill__box">
							<view class="" style="font-size: 28rpx;">秒杀专区</view>
						</view>
						<view class="" style="display: flex;justify-content: space-around;">
							<view class="" v-for="(item,index) in seckillList" :key="index">
								<image :src="url+item.image" mode="widthFix"
									style="width: 150rpx;border-radius: 10rpx;"></image>
								<view class="moneyIcon" style="padding-left: 30rpx;">{{item.price[0]}}</view>
							</view>
						</view>
					</view>
					<view class=""
						style="background: #fff;border-radius: 10rpx;padding: 10rpx;width: 49%;margin-top: 10rpx;"
						v-if="zq && zq.length>0">
						<view class="tui-seckill__box">
							<view class="" style="font-size: 28rpx;">9.9包邮</view>
						</view>

						<view class="" style="display: flex;justify-content: space-around;">
							<view class="" v-for="(item,index) in zq" :key="index" @click="freeShipping">
								<image :src="url+item.image" mode="widthFix"
									style="width: 150rpx;border-radius: 10rpx;"></image>
								<view class="moneyIcon2">{{item.price[0]}}</view>
							</view>
						</view>
					</view>
					<view class=""
						style="background: #fff;border-radius: 10rpx;padding: 10rpx;width: 49%;margin-top: 10rpx;"
						v-if="ys && ys.length>0">
						<view class="tui-seckill__box">
							<view class="" style="font-size: 28rpx;">限时预售</view>
						</view>
						<view class="" style="display: flex;justify-content: space-around;" @click="ysPage">
							<view class="" v-for="(item,index) in ys" :key="index">
								<image :src="url+item.image" mode="widthFix"
									style="width: 150rpx;border-radius: 10rpx;"></image>
								<view class="moneyIcon2">{{item.price[0]}}</view>
							</view>
						</view>
					</view>
					<view class=""
						style="background: #fff;border-radius: 10rpx;padding: 10rpx;width: 49%;margin-top: 10rpx;">
						<view class="tui-seckill__box">
							<view class="" style="font-size: 28rpx;">打折专区</view>
						</view>
						<view class="" style="display: flex;justify-content: space-around;" @click="discount">
							<view class="" v-for="(item,index) in discountList" :key="index">
								<image :src="url+item.image" mode="widthFix"
									style="width: 150rpx;border-radius: 10rpx;"></image>
								<view class="moneyIcon2">{{item.price[0]}}</view>
							</view>
						</view>
					</view>
				</view>


			</view>
			<view class="tui-block__box tui-mtop__20">
				<view class="tui-group-name">
					<view>
						<text>排行榜</text>
						<text class="tui-sub__desc">大家都在买</text>
					</view>
					<view class="tui-more__box" @click="goToList">
						<text>更多</text>
						<!-- <tui-icon name="arrowright" :size="36" unit="rpx" color="#999"></tui-icon> -->
						<text class="tn-icon-right"></text>
					</view>
				</view>
				<view class="tui-new-box">
					<view class="tui-new-item" :class="[index != 0 && index != 1 ? 'tui-new-mtop' : '']"
						v-for="(item, index) in goodsShelves" :key="index" @tap="detail(item)">
						<!-- 		<image :src="url+ item.image" 
							class="tui-new-label" v-if="item.isLabel"></image> -->
						<view class="tui-title-box">
							<view class="tui-new-title" style="text-align: center;">{{ item.title }}</view>
							<view class="tui-new-price">
								<text class="tui-new-present" style="text-align: center;">￥{{ item.price[0] }}</text>
							</view>
						</view>
						<image :src="url+ item.image" class="tui-new-img"
							style="margin-left: 20rpx;border-radius: 10rpx;" lazy-load></image>
					</view>
				</view>
			</view>
		</view>
		<recommend v-if="current==0 || current==1" />
		<tn-popup v-model="rightShow" mode="right" width="85%">
			<view class="" style="background: #f1f1f1;height: 100%;overflow: hidden;">
				<view class="" style="display: flex;justify-content: space-between;align-items: center;">
					<view class="" style="font-weight: bold;margin: 30rpx;">{{currentData.name}}</view>
					<tn-button backgroundColor="#01BEFF" fontColor="#fff" @click="rightShow=false">关闭</tn-button>
				</view>

				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="" style="background: #fff;border-radius: 20rpx;margin: 20rpx 0;padding: 30rpx 0;"
						v-for="(item,index) in currentData.children" :key="index">
						<view class="" style="font-weight: bold;margin: 30rpx;">{{item.name}}</view>
						<tn-grid align="left" :col="cols">
							<block v-for="(itemSub, k) in item.children" :key="k">
								<!-- H5 -->
								<!-- #ifndef MP-WEIXIN -->
								<tn-grid-item @click="demo2Detail(itemSub)">
									<image :src="info.app.cdnurl+itemSub.image" mode="widthFix"
										style="width: 80rpx;height: 80rpx;" v-if="itemSub.image"></image>
									<image src="../../static/notice.png" mode="widthFix"
										style="width: 80rpx;height: 80rpx;" v-else></image>
									<view
										style="font-size: 24rpx;padding:20rpx 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align: center;width: 130rpx;">
										{{ itemSub.name }}
									</view>
								</tn-grid-item>
								<!-- #endif-->
								<!-- 微信小程序 -->
								<!-- #ifdef MP-WEIXIN -->
								<tn-grid-item :style="{width: gridItemWidths}" @click="demo2Detail(itemSub)">
									<image :src="info.app.cdnurl+itemSub.image" mode="widthFix"
										style="width: 80rpx;height: 80rpx;" v-if="itemSub.image"></image>
									<image src="../../static/notice.png" mode="widthFix"
										style="width: 80rpx;height: 80rpx;" v-else></image>
									<view
										style="font-size: 24rpx;padding:20rpx 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width: 130rpx;text-align: center;">
										{{ itemSub.name }}
									</view>
								</tn-grid-item>
								<!-- #endif-->
							</block>
						</tn-grid>
					</view>
				</scroll-view>
			</view>
		</tn-popup>

		<view class="" style="position: absolute;left: 1000px">
			<shareImages ref="canvas" :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :shareTitle="shareTitle"
				:goodsTitle="goodsTitle" :shareImage="shareImage" :qrSize="qrSize" :qrUrl="qrUrl"
				@success="shareSuccess" style="position: absolute;right: 10000;">
			</shareImages>
		</view>
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<view class="tui-safearea-bottom"></view>
		<tn-popup v-model="show" mode="bottom" :borderRadius="20">
			<view class="" style="padding: 50rpx 0 0 0;">
				<view
					style="display: flex;justify-content: space-around;border-bottom: 1rpx solid #e7e7e7;padding-bottom: 20rpx;">
					<button open-type="share" class=""
						style="display: flex;flex-direction: column;align-items: center;width: 50%;background: none;"
						v-if="info.platform.share.methods.includes('forward')">
						<image src="../../static/share_wx.png" mode="widthFix" style="width: 80rpx;"></image>
						<view class="" style="margin-top: 10rpx;font-size: 26rpx;color: #666666;">微信好友
						</view>
					</button>
					<view class="" style="display: flex;flex-direction: column;align-items: center;width: 50%;"
						@click="copy" v-if="info.platform.share.methods.includes('link')">
						<image src="../../static/share_link.png" mode="widthFix" style="width: 80rpx;"></image>
						<view class="" style="margin-top: 10rpx;font-size: 26rpx;color: #666666;">复制链接
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: column;align-items: center;width: 50%;"
						v-if="info.platform.share.methods.includes('poster')" @click="createsShareImage">
						<image src="../../static/share_poster.png" mode="widthFix" style="width: 80rpx;"></image>
						<view class="" style="margin-top: 10rpx;font-size: 26rpx;color: #666666;">生成海报</view>
					</view>
				</view>
				<view class="" style="text-align: center;color: #bbbbbb;font-size: 28rpx;padding: 20rpx 0;"
					@click="show=false">取消</view>
			</view>
		</tn-popup>

	</view>
</template>
<script>
	import {
		getShopAll,
		getInit,
		getGoodsIds,
		getCoupon,
		getShopGoodsActivity,
		getShopGoodsList,
		getShopShareAdd,
		getRechargeRules
	} from '../../apis/index.js'
	import {
		mapState
	} from 'vuex';
	import recommend from '@/components/recommend.vue'
	import {
		decryptSpm
	} from '../../util/share.js';
	import shareImages from '@/components/hj-placard/shareImages.vue'
	import {
		getToken
	} from '@/util/auth';
	import {
		shartInfo
	} from "@/util/share.js"
	export default {
		components: {
			recommend,
			shareImages
		},
		data() {
			return {
				tjbd: [],
				cur: 0,
				show: false,
				rightShow: false,
				col: 5,
				cols: 4,
				indexLength: 8,
				url: '',
				activeItemStyle: {
					"font-size": "32rpx",
					"color": "#fff",
					"font-weight": "bold",
				},
				inactiveItemStyle: {
					"font-size": "28rpx",
				},
				currentName: '111',
				title: 'Hello',
				showCity: true, // 默弹窗显示
				categoryCurrent: 0,
				swiperList: [],
				menuList: [],
				goodsList: [],
				currentData: [],
				allChildren: [],
				TabCur: 0,
				scrollLeft: 0,
				CustomBar: 0,
				category: [],
				newProduct: [],
				productList: [],
				pageIndex: 1,
				loadding: false,
				pullUpOn: true,
				opacity: 1,
				rowLeft: 0,
				list: [{
					name: '推荐',
				}, {
					name: '排行榜',
				}],
				current: 0,
				menu: [],
				content: [],
				imageBlock: [],
				discountList: [],
				goodsShelves: [],
				goodsList: [],
				seckillList: [],
				zq: [],
				ys: [],
				tj: [],
				tjss: [],
				name: '深圳',
				zqList: [],
				ysList: [],
				goodsCard: null,
				goodsShelvesAll: [],
				listSize: 10,
				page: 1,
				last_page: '',
				canvasImages: '',
				canvasWidth: 375, // 宽度
				canvasHeight: 700, // 高度
				shareTitle: '我是这张图片的标题', // 分享标题
				goodsTitle: '我是这张图片的标题我是这张图片的标题我是这张图片的标', // 商品宣传标题
				shareImage: '../../static/bg.jpg', // 背景图片
				qrSize: 100, // 二维码大小
				qrUrl: '', // 生成二维码的链接
				swiperHeight: 360
			};
		},
		computed: {
			// 兼容小程序
			gridItemWidth() {
				return 100 / this.col + '%'
			},
			gridItemWidths() {
				return 100 / this.cols + '%'
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				this.show = false
				let ress = shartInfo()
				return {
					title: this.info.app.name,
					path: `/pages/index/index?${ress.query}&id=${this.userInfos.invite_code}`,
					imageUrl: this.canvasImages,
				};
			}
		},
		onLoad(options) {
			if (options.scene) {
				//邀请人
				let containsAmpersand = decodeURIComponent(options.scene).includes('&');
				if (containsAmpersand) {
					const sceneParams = decodeURIComponent(options.scene).split('&');
					let number = sceneParams[1].split('=')[1];
					uni.setStorageSync('invite_code', number)
					let res = decryptSpm(sceneParams[0].split('=')[1]);
					uni.navigateTo({
						url: `${res.page}?index=${res.query.index}`
					})
				} else {
					let res = decryptSpm(decodeURIComponent(options.scene).split('=')[1]);
					uni.navigateTo({
						url: `${res.page}?index=${res.query.index}`
					})
				}
			}
			console.log(options, 'optionsoptionsoptionsoptionsoptions')
			// #ifdef MP-WEIXIN
			if (options.spm) {
				if (options.id) {
					uni.setStorageSync('invite_code', options.id)
				}
				let res = decryptSpm(options.spm);
				if (res.query.index) {
					uni.navigateTo({
						url: `${res.page}?index=${res.query.index}`
					})
				}
			}
			// #endif
			// #ifdef H5
			if (window.location.href.match(/spm=(.*?)#/)) {
				const spmValue = window.location.href.match(/spm=(.*?)#/)[1];
				if (spmValue) {
					let res = decryptSpm(spmValue);
					if (res.query.index) {
						uni.navigateTo({
							url: `/templatePage/productDetail/productDetail?index=${res.query.index}`
						})
					}
				}
			}
			// #endif
		},
		onShow() {

			let _this = this
			console.log(this.userInfos, 'userInfos')
			let isLogin = getToken()
			if (isLogin) {
				let res = shartInfo()
				let str = `/pages/index/index?${res.query}`
				let paths = {
					"path": str,
					"param": `id=${this.userInfos.invite_code}`
				}
				const encodePath = encodeURIComponent(JSON.stringify(paths))
				let url =
					`https://www.taoding1688.com/addons/shop/third.wechat/wxacode?platform=miniProgram&payload=${encodePath}`
				uni.downloadFile({
					url: url,
					success: (downloadRes) => {
						if (downloadRes.statusCode == 200) {
							_this.qrUrl = downloadRes.tempFilePath
							_this.$refs.canvas.canvasCreate(downloadRes.tempFilePath);
						}
					},
					failure: (err) => {
						console.log('下载文件失败', err);
					}
				});
			}


		},
		mounted() {
			this.getLocation()
			this.getList()
			this.getInits()
			let _this = this
			uni.$on('update', data => {
				_this.name = data
			});
		},
		methods: {
			swiperChange(e) {
				this.cur = e.detail.current
				if (e.detail.current === 0) {
				  this.swiperHeight = 360;
				} else {
				  this.swiperHeight = 200;
				}
			},
			nagateGo(item) {
				console.log(item)
				uni.navigateTo({
					url: item.url
				})
			},
			// 生成分享图片
			createsShareImage() {
				this.show = false
				let isLogin = getToken()
				console.log(isLogin, this.canvasImages, 'this.canvasImages')
				if (isLogin) {
					if (this.canvasImages) {
						uni.previewImage({
							urls: [this.canvasImages],
						});
					} else {
						uni.showToast({
							title: '请稍后再试...',
							icon: 'none'
						})
					}

				} else {
					uni.navigateTo({
						url: '/templatePage/login/demo4/demo4'
					})
				}

			},
			shareSuccess(e) {
				this.canvasImages = e
			},
			detailCurrent(item) {
				uni.navigateTo({
					url: `/templatePage/productDetail/productDetail?index=${item.id}`
				})
			},
			currentItem(item) {
				uni.navigateTo({
					url: `/templatePage/coupon/demo2/demo2?id=${item.id}`
				})
			},
			getChildren(arr) {
				const childrenList = [];
				arr.forEach((item) => {
					if (item && typeof item === 'object' && item.children && Array.isArray(item.children) && item
						.children.length > 0) {
						childrenList.push(...item.children);
					}
				});
				return childrenList;
			},
			allCurrentData() {
				// if (this.indexLength == this.currentData.length) {
				// 	this.indexLength = 8
				// } else {
				// 	this.indexLength = this.currentData.length
				// }
				this.rightShow = true
			},
			async change(index) {
				this.currentData = this.menu[index]
				this.allChildren = []
				this.current = index;
				if (index != 0 && index != 1) {
					// this.currentData = this.getChildren(this.menu[this.current].children)

					this.page = 1
					let res = await getShopGoodsList(this.menu[this.current].id, this.listSize, this.page)
					this.last_page = res.data.last_page

					if (res.code == 1) {
						this.allChildren = [...this.allChildren, ...res.data.data]
					}
				}
			},
			message() {
				uni.switchTab({
					url: '/pages/message/message'
				})
			},
			getNavgate(str) {
				let targetIndex = -1;
				let id = ''
				console.log(this.menu, 'this.menu')
				targetIndex = this.menu.findIndex(item => item.name === str);
				if (targetIndex !== -1) {
					const id = this.menu[targetIndex];
					this.currentData = this.getChildren(id.children);
					this && this.$tn.vuex('currentDatas', this.currentData);
					uni.navigateTo({
						url: `/discountPage/mall/mall?id=${id.id}&title=${str}`
					});
				}

			},
			goToMenu(t, item, index) {
				console.log(t, index, item)

				if (t == 1) {

					switch (index) {
						case 0:
							this.getNavgate('手机')
							break;
						case 1:
							// this.getNavgate('手机')
							uni.switchTab({
								url: '/pages/compose/index'
							})
							break;
						case 2:
							uni.switchTab({
								url: '/pages/compose/index'
							})
							break;
						case 3:
							this.getNavgate('生鲜')
							break;
						case 4:
							// this.getNavgate('女装')
							uni.navigateTo({
								url: '/discountPage/redWrap/redWrap'
							})
							break;
						case 5:
							this.getNavgate('手机')
							break;
						case 6:
							// this.getNavgate('家居')
							uni.switchTab({
								url: '/pages/compose/index'
							})
							break;
						default:
							break;
					}


					return
				}

				switch (index) {
					case 0:
						this.getNavgate('工业品')
						break;
					case 1:
						this.getNavgate('家电')
						break;
					case 2:
						this.getNavgate('电脑')
						break;
					case 3:
						this.getNavgate('女装')
						break;
					case 4:
						this.getNavgate('食品')
						break;
					case 5:
						this.getNavgate('母婴')
						break;
					case 6:
						this.getNavgate('家居')
						// uni.navigateTo({
						// 	url: '/templatePage/coupon/index/index'
						// })
						break;
					case 7:
						this.getNavgate('生鲜')
						break;
					case 8:
						this.getNavgate('洗护')
						break;
					case 9:
						// this.getNavgate('生鲜')
						uni.navigateTo({
							url: '/discountPage/redWrap/redWrap'
						})
						break;
					default:
						break;
				}
			},
			//包邮
			freeShipping() {
				// this && this.$tn.vuex('zqLists', this.zqList)

				this && this.$tn.vuex('setGoodsShelves', this.zqList)
				uni.navigateTo({
					url: `/templatePage/coupon/demo2/theChart?title=9.9包邮`
				})
			},
			ysPage() {
				this && this.$tn.vuex('setGoodsShelves', this.ysList)
				uni.navigateTo({
					url: `/templatePage/coupon/demo2/theChart?title=限时预售`
				})
			},
			ptPage() {
				this && this.$tn.vuex('setGoodsShelves', this.tjbd)
				uni.navigateTo({
					url: `/templatePage/coupon/demo2/theChart?title=推荐`
				})
			},
			//秒杀
			// seckill(){
			// 	uni.navigateTo({
			// 		url:'/templatePage/seckillList/seckillList'
			// 	})
			// },
			//拼团
			pintuan() {
				uni.navigateTo({
					url: '/templatePage/pintuan/pintuan'
				})
			},
			//领券中心
			coupon() {
				uni.navigateTo({
					url: '/templatePage/coupon/demo2/demo2'
				})
			},
			//定位
			getLocation() {
				let _this = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.name = res.address.city
					}
				});
			},
			demo2Detail(item) {
				uni.navigateTo({
					url: `/templatePage/coupon/demo2/demo2?id=${item.id}`
				})
			},
			focus() {
				uni.navigateTo({
					url: '/templatePage/search/search'
				})
			},
			//秒杀专区
			async goToSeckIll() {
				let seckill = this.findItemById(this.content.template.home.data, 'seckill').data.activityId
				// let seckillList = await this.getShopGoodsList(seckill)
				uni.navigateTo({
					url: `/templatePage/seckillList/seckillList?id=${seckill}`
				})
			},
			//点击更多
			goToList() {
				this.$tn.vuex('setGoodsShelves', this.goodsShelvesAll)
				uni.navigateTo({
					url: `/templatePage/coupon/demo2/theChart?title=排行榜`
				})
			},




			goToListjpbd() {
				this.$tn.vuex('setGoodsShelves', this.tjbd)
				uni.navigateTo({
					url: `/templatePage/coupon/demo2/theChart?title=精品榜单`
				})
			},
			findItemById(array, type) {
				return array.find(item => item.type === type);
			},
			//分类
			showCateModel() {
				// this.$emit('basic',1)
				uni.switchTab({
					url: '/pages/compose/index'
				})
			},
			async getInits() {
				let res = await getInit()
				this.content = res.data
				this && this.$tn.vuex('info', res.data)
				this.url = this.content.app.cdnurl
				//轮播图
				this.swiperList = this.findItemById(this.content.template.home.data, 'imageBanner').data.list
				//按钮swiper
				let arr = this.findItemById(this.content.template.home.data, 'menuButton').data.list
				console.log('分类', arr)
				for (let i = 0; i < arr.length; i += 10) {
					let chunk = arr.slice(i, i + 10);
					this.menuList.push(chunk);
				}
				// this.menuList = [arr.slice(0, 5), arr.slice(5)];




				//广告
				var imageBlock = this.findItemById(this.content.template.home.data, 'imageBlock')

				if (imageBlock) {
					this.imageBlock = imageBlock.data
				} else {
					this.imageBlock = {}
				}
				//打折
				//请求的id
				let goodsCard = this.findItemById(this.content.template.home.data, 'goodsCard').data.goodsIds
				this.goodsCard = goodsCard
				this.discountList = await this.getIds(goodsCard)
				this.discountList = this.getSlice(this.discountList, 2)
				//排行榜
				let goodsShelves = this.findItemById(this.content.template.home.data, 'goodsShelves').data.goodsIds
				this.goodsShelvesAll = await this.getIds(goodsShelves)



				//精品推荐

				let tjbd = this.content.template.home.data[22].data.goodsIds
				this.tjbd = await this.getIds(tjbd)









				// uni.setStorage({
				// 	key: 'goodsShelves',
				// 	data: this.goodsShelves
				// })

				this.goodsShelves = this.getSlice(this.goodsShelvesAll, 4)
				//拼团

				let groupon = this.findItemById(this.content.template.home.data, 'groupon').data.activityId
				this.goodsList = await this.getShopGoodsList(groupon)
				this.goodsList = this.getSlice(this.goodsList, 4)

				//秒杀
				let seckill = this.findItemById(this.content.template.home.data, 'seckill').data.activityId
				this.seckillList = await this.getShopGoodsList(seckill)
				this.seckillList = this.getSlice(this.seckillList, 2)

				//9.9元专区and预售
				let zq = this.content.template.home.data[13].data.goodsIds

				let ys = this.content.template.home.data[15].data.goodsIds
				this.zq = await this.getIds(zq)

				this.zqList = this.zq


				this.zq = this.getSlice(this.zq, 2)

				this.ys = await this.getIds(ys)
				this.ysList = this.ys
				this.ys = this.getSlice(this.ys, 2)
				//推荐
				let tj = this.content.template.home.data[19].data.goodsIds
				tj = await this.getIds(tj)
				this.$tn.vuex('tjs', tj)
				this.tjss = tj
				this.tj = tj
			},

			getSlice(arr, num) {

				if (arr && arr.length >= num) {
					return arr.slice(0, num);
				} else {
					return arr
				}
			},
			async getShopGoodsList(id) {
				let res = await getShopGoodsActivity(id)
				return res.data
			},
			async getList() {
				let res = await getShopAll({
					id: 1
				})
				this.menu = [...this.list, ...res.data.children]
			},
			async getIds(ids) {
				if (ids) {
					let res = await getGoodsIds(ids)
					return res.data
				}

			},


			// 获取当前位置
			getLocation() {
				const _this = this
				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: 'scope.userLocation',
					success() {
						let location = {
							longitude: 0,
							latitude: 0,
							province: "",
							city: "",
							area: "",
							street: "",
							address: "",
						};
						uni.getLocation({
							type: 'wgs84',
							geocode: true,
							altitude: true,
							isHighAccuracy: true,
							success: function(res) {
								uni.setStorageSync('latitude', _this.latitude)
								uni.setStorageSync('longitude', _this.longitude)
								location.longitude = res.longitude;
								location.latitude = res.latitude;
								let key = '7be7ff94c93255cf84b4f2380a9b3477'
								_this.loadCity(res.longitude, res.latitude, key)

							},
							fail: function(err) {
								// _this.$util.modal({
								// 	c: '获取位置失败，请重新进入小程序并同意获取位置',
								// }, () => wx.openSetting())
							}
						})
					},
					fail: () => {
						this.tipsAddress()
					}
				})
				// #endif
				// #ifdef H5
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					altitude: true,
					isHighAccuracy: true,
					success: function(res) {
						let key = '7be7ff94c93255cf84b4f2380a9b3477'
						_this.loadCity(res.longitude, res.latitude, key)
					}
				});
				// #endif
			},

			loadCity(longitude, latitude, key) {
				var _this = this
				uni.request({
					header: {
						'Content-Type': 'application/text',
					},
					//注意:这里的key值需要高德地图的 web服务生成的key  只有web服务才有逆地理编码
					url: `https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${longitude},${latitude}&key=${key}&extensions=all`,
					success(res) {
						_this.name = res.data.regeocode.addressComponent.city
					},
					fail(err) {
						console.log(err, "获取位置失败信息")
					}
				})
			},
			tipsAddress() {
				this.$util.showModal({
					content: '为了正常使用，请授权「位置信息」- 「使用小程序时允许」',
					showCancel: false,
				}).then(() => {
					wx.openSetting({
						success: (res) => {
							if (res.errMsg === 'openSetting:ok') {
								if (!res.authSetting['scope.userLocation']) {
									this.tipsAddress()
								} else {
									this.getLocation()
								}
							}
						},
						fail: () => {
							this.tipsAddress()
						}
					})
				})
			},
			goToCity() {

				// uni.navigateTo({
				// 	url: `/pages/choseCity/choseCity?currentNmae=${this.currentName}`
				// })

				uni.navigateTo({
					url: `/templatePage/selectCity/selectCity?currentCity=${this.name}`
				})


			},
			selectCity(item) {
				// this.showCity = false
			},
			closeModal() {
				this.showCity = false
			},
			cateChange(idx) {
				// 分类点击
				this.categoryCurrent = idx
			},
			rowscroll(e) {
				this.rowLeft = e.scrollLeft
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			detail: function(item) {

				// return
				uni.navigateTo({
					url: `/templatePage/productDetail/productDetail?index=${item.id}`
				});
			},
			coupon() {
				// uni.navigateTo({
				// 	url: '/pages/index/coupon/coupon'
				// });
				uni.navigateTo({
					url: '/templatePage/coupon/demo1/demo1'
				})
			},
			classify: function() {
				return
				uni.switchTab({
					url: '../classify/classify'
				});
			},
			more: function(e) {
				return
				let key = e.currentTarget.dataset.key || '';
				uni.navigateTo({
					url: '/pages/index/productList/productList?searchKey=' + key
				});
			},
			search: function() {
				return
				uni.navigateTo({
					url: '/pages/common/search/search'
				});
			},
			seckill(item) {
				uni.navigateTo({
					url: `/templatePage/productDetail/productDetail?index=${item.id}`
				})
			},
			discount() {
				uni.navigateTo({
					url: `/discountPage/discount/discount?ids=${this.goodsCard}`
				})
			},
			group(type) {
				let url = '/templatePage/groupList/groupList';
				uni.navigateTo({
					url: url
				});
			}
		},
		onPullDownRefresh: function() {
			let loadData = JSON.parse(JSON.stringify(this.productList));
			loadData = loadData.splice(0, 10);
			this.productList = loadData;
			this.pageIndex = 1;
			this.pullUpOn = true;
			this.loadding = false;
			uni.stopPullDownRefresh();
		},
		async onReachBottom() {
			if (this.last_page > this.page) {
				this.page += 1
				let res = await getShopGoodsList(this.menu[this.current].id, this.listSize, this.page)
				this.last_page = res.data.last_page
				if (res.code == 1) {
					this.allChildren = [...this.allChildren, ...res.data.data]
				}
			}


			if (!this.pullUpOn) return;
			this.loadding = true;
			if (this.pageIndex == 4) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				let loadData = JSON.parse(JSON.stringify(this.productList));
				loadData = loadData.splice(0, 10);
				if (this.pageIndex == 1) {
					loadData = loadData.reverse();
				}
				this.productList = this.productList.concat(loadData);
				this.pageIndex = this.pageIndex + 1;
				this.loadding = false;
			}
		},
		onPageScroll(e) {
			// #ifdef APP-PLUS
			let scrollTop = e.scrollTop;
			if (scrollTop < 0) {
				if (this.opacity > 0)
					this.opacity = 1 - Math.abs(scrollTop) / 30;
			} else {
				this.opacity = 1
			}
			// #endif
		},

	};
</script>

<style lang="scss" scoped>
	.activeHei {
		height: 400rpx;
	}

	.Hei {
		height: 250rpx;
	}

	.scroll-Y {
		height: 90%;
	}

	page {
		background-color: #f7f7f7;
	}

	.container {
		padding-bottom: 100rpx;
		color: #333;
	}

	.tui-header {
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #e41f19;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		z-index: 999;
		transition: opacity .4s;
	}

	.tui-rolling-search {
		width: 100%;
		height: 60rpx;
		border-radius: 35rpx;
		padding: 0 40rpx 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		color: #999;
	}

	.tui-category {
		font-size: 24rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin: 0;
		margin-right: 22rpx;
		flex-shrink: 0;
	}

	.tui-category-scale {
		transform: scale(0.7);
		line-height: 24rpx;
	}

	.tui-icon-category {
		line-height: 20px !important;
		margin-bottom: 0 !important;
	}

	.tui-swiper {
		font-size: 26rpx;
		height: 60rpx;
		flex: 1;
		padding-left: 12rpx;
	}

	.tui-swiper-item {
		display: flex;
		align-items: center;
	}

	.tui-hot-item {
		line-height: 26rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-header-banner {
		padding-top: 100rpx;
		box-sizing: border-box;
		background: #e41f19;
	}

	.tui-hot-search {
		color: #fff;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 2;
	}

	.tui-hot-tag {
		background-color: rgba(255, 255, 255, 0.15);
		padding: 10rpx 24rpx;
		border-radius: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 24rpx;
	}

	.tui-banner-bg {
		display: flex;
		height: 180rpx;
		background-color: #e41f19;
		position: relative;
	}

	.tui-primary-bg {
		width: 50%;
		display: inline-block;
		height: 224rpx;
		border: 1px solid transparent;
		position: relative;
		z-index: 1;
		background-color: #e41f19;
	}

	.tui-route-left {
		transform: skewY(8deg);
	}

	.tui-route-right {
		transform: skewY(-8deg);
	}

	.tui-banner-box {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: absolute;
		/* overflow: hidden; */
		z-index: 99;
		bottom: -80rpx;
		left: 0;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 240rpx;
		border-radius: 20rpx;
		overflow: hidden;
		transform: translateY(0);
		background-color: #f8f8f8;
	}

	.tui-slide-image {
		width: 100%;
		height: 240rpx;
		display: block;
	}

	/* #ifdef MP-WEIXIN */
	.tui-banner-swiper .wx-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background: none;
		justify-content: space-between;
	}

	.tui-banner-swiper .wx-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	.tui-banner-swiper .wx-swiper-dot-active::before {
		background-color: #fff;
	}

	.tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */

	/* #ifndef MP-WEIXIN */
	>>>.tui-banner-swiper .uni-swiper-dot {
		width: 8rpx;
		height: 8rpx;
		display: inline-flex;
		background-color: none;
		justify-content: space-between;
	}

	>>>.tui-banner-swiper .uni-swiper-dot::before {
		content: '';
		flex-grow: 1;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		overflow: hidden;
	}

	>>>.tui-banner-swiper .uni-swiper-dot-active::before {
		background-color: #fff;
	}

	>>>.tui-banner-swiper .uni-swiper-dot.uni-swiper-dot-active {
		width: 16rpx;
	}

	/* #endif */

	.tui-product-category {
		padding: 80rpx 20rpx 30rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #555;
		/* margin-bottom: 20rpx; */
	}

	.tui-category-item {
		width: 20%;
		height: 118rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-top: 30rpx;
	}

	.tui-category-img {
		height: 80rpx;
		width: 80rpx;
		display: block;
	}

	.tui-category-name {
		line-height: 24rpx;
	}

	.tui-block__box {
		width: 100%;
		padding: 0 15rpx 15rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		// border-radius: 20rpx;
		overflow: hidden;
	}

	.tui-product-box {
		// margin-top: 20rpx;
		// padding: 0 10rpx;
		box-sizing: border-box;
	}

	.tui-img__coupon {
		width: 100%;
		height: 184rpx;
		display: block;
	}

	.tui-mtop__20 {
		margin-top: 20rpx;
	}

	.tui-bg-white {
		background-color: #fff;
	}

	.tui-group-name {
		width: 100%;
		font-size: 34rpx;
		line-height: 34rpx;
		font-weight: bold;
		text-align: center;
		padding: 30rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333;
	}

	.tui-sub__desc {
		color: #34c7a9;
		font-size: 28rpx;
		font-weight: 400;
		padding-left: 25rpx;
	}

	.tui-color__pink {
		color: #EF1346;
	}

	.tui-seckill__box {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}

	.tui-seckill__img {
		width: 160rpx;
		height: 34rpx;
	}

	.tui-countdown__box {
		width: 228rpx;
		display: flex;
		align-items: center;

		color: #fff;
		background-color: #fff;
		font-weight: 400;
		border: 1rpx solid #eb0909;
		height: 40rpx;
		border-radius: 30px;
		overflow: hidden;
		margin-left: 25rpx;
	}

	.tui-countdown__boxTitle {
		display: flex;
		align-items: center;
		color: #fff;
		font-weight: 400;
		border: 1rpx solid #eb0909;
		height: 40rpx;
		border-radius: 30px;
		overflow: hidden;
		margin-left: 25rpx;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
	}

	.tui-countdown__title {
		width: 100rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #eb0909;
		flex-shrink: 0;
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-flex__center {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/*秒杀商品*/
	.tui-goods__list {
		display: flex;
		align-items: center;
	}

	.tui-goods__item {
		background-color: #fff;
		width: 150rpx;
		height: 230rpx;
		border-radius: 6rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
		margin-right: 18rpx;
	}

	.tui-goods__imgbox {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}

	.tui-goods__img {
		max-width: 150rpx;
		max-height: 150rpx;
		display: block;
	}

	.tui-pri__box {
		max-width: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tui-sale-pri {
		display: flex;
		align-items: flex-end;
		padding: 10rpx 0 8rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		line-height: 28rpx;
		color: #eb0909;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.tui-size-sm {
		font-size: 24rpx;
		line-height: 24rpx;
		transform: scale(0.8);
		transform-origin: 0 50%;
	}

	.tui-original__pri {
		font-size: 24rpx;
		line-height: 24rpx;
		color: #999999;
		transform-origin: center 10%;
		transform: scale(0.8);
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: line-through;
	}

	/*秒杀商品*/

	.tui-more__box {
		display: flex;
		align-items: center;
		font-weight: 400;
		color: #999;
	}

	.tui-more__box text {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-new-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.tui-new-item {
		width: 49%;
		height: 180rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: #f5f2f9;
		position: relative;
		border-radius: 12rpx;
	}

	.tui-new-mtop {
		margin-top: 2%;
	}

	.tui-title-box {
		font-size: 24rpx;
	}

	.tui-new-title {
		font-size: 26rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-new-price {
		padding-top: 18rpx;
		display: flex;
		flex-direction: column;
	}

	.tui-new-present {
		color: #ff201f;
		font-weight: bold;
	}

	.tui-new-original {
		display: inline-block;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
		transform: scale(0.8);
		transform-origin: center center;
	}

	.tui-new-img {
		width: 148rpx;
		height: 148rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-new-label {
		width: 56rpx;
		height: 56rpx;
		border-top-left-radius: 12rpx;
		position: absolute;
		left: 0;
		top: 0;
	}

	.tui-title__img {
		width: 100%;
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
	}

	.tui-title__img image {
		width: 352rpx;
		height: 32rpx;
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding-top: 20rpx; */
	}

	.tui-product-container {
		flex: 1;
		margin-right: 2%;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 4%;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		line-height: 32rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	.unicorn-header1 {
		background: #AE1A24;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		padding: 0 10px;
	}

	.unicorn-header2 {
		box-sizing: border-box;
		background-color: #ffffff;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		// border-radius: 20rpx;
	}

	.unicorn-font-size {
		font-size: 35rpx;
		font-weight: 700;
	}

	.unicorn-border-radius-swiper {
		border-radius: 10px;
	}

	.unicorn-body {
		padding: 0rpx 15rpx;
	}

	.unicorn-image {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}

	.unicorn-br-1 {
		border-top-left-radius: 10px;
	}

	.unicorn-br-2 {
		border-top-right-radius: 10px;
	}

	.unicorn-br-3 {
		border-bottom-left-radius: 10px;
	}

	.unicorn-br-4 {
		border-bottom-right-radius: 10px;
	}

	.nav .cu-item.cur {
		border-bottom: 5rpx solid;
	}

	.floor-list {
		white-space: nowrap;
	}

	.scoll-wrapper {
		display: flex;
		align-items: flex-start;
	}

	.floor-item {
		width: 150upx;
		margin-right: 20upx;
		font-size: 26rpx;
		color: #303133;
		line-height: 1.8;

		image {
			width: 150upx;
			height: 150upx;
			border-radius: 6upx;
		}
	}

	.guess-section {
		display: flex;
		flex-wrap: wrap;
		background: #fff;

		.guess-item {
			display: flex;
			flex-direction: column;
			width: 48%;
			padding-bottom: 40upx;

			&:nth-child(2n+1) {
				margin-right: 4%;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 330upx;
			border-radius: 3px;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}

		.title {
			font-size: 32rpx;
			color: #303133;
			line-height: 80upx;
		}

		.price {
			font-size: 32rpx;
			color: #fa436a;
			line-height: 1;
		}
	}

	.pro-box {
		display: flex;
		align-items: center;
		margin-top: 10upx;
		font-size: 24rpx;
		padding-right: 10upx;
	}

	.progress-box {
		flex: 1;
		border-radius: 10px;
		overflow: hidden;
		margin-right: 8upx;
	}

	.clamp {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}

	.categoryNavbar-container {
		width: 100%;
		height: 80rpx;

		.categoryScroll {
			width: 640rpx;
			// height: 60rpx;
			white-space: nowrap;
			display: flex;

			.category-container {
				display: inline-block;

				.category-items {
					margin-right: 30rpx;

					.categoryname {
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
					}

					.bottom-border {
						display: none;
						background-color: #FFFFFF;
						width: 65rpx;
						height: 4rpx;
						border-radius: 1rpx;
						margin-top: 5rpx;
					}
				}


			}
		}

		.category-icon-box {
			width: 32rpx;
			height: 32rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			margin-bottom: 10rpx;
		}
	}

	.category-items-active {
		.categoryname {
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.bottom-border {
			display: block;
		}
	}

	.moneyIcon {
		background-image: url('https://oss.taoding1688.com/static/uniapp/static/85.png');
		background-repeat: no-repeat;
		background-size: 95% 100%;
		-moz-background-size: 90% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
	}

	.moneyIcon2 {
		background-image: url('https://oss.taoding1688.com/static/uniapp/static/86.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
	}


	/* 商品列表*/

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 0 10rpx;
	}

	.tui-product-container {
		flex: 1;
		margin-right: 10rpx;
	}

	.tui-product-container:last-child {
		margin-right: 0;
	}

	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #fff;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #2e2e2e;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-pro-tit2 {
		color: #999999;
		font-size: 22rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		margin-top: 10rpx;
	}

	.tui-pro-price {
		padding-top: 18rpx;
	}

	.tui-sale-price {
		font-size: 34rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	/* 商品列表*/
</style>